<template>
  <div>
    <header-comm></header-comm>
    <div class="bcg jcsz_box">
      <div class="hedlist">
        <div class="headbtn">
          <a-button v-if="language.cnName==1" type="primary" class="editable-add-btn yybtn" @click="cnClick">中文</a-button>
          <a-button v-if="language.enName==1" type="primary" class="editable-add-btn yybtn" @click="enClick">英文</a-button>
          <a-button v-if="language.dwName==1" type="primary" class="editable-add-btn yybtn" @click="dwClick">德文</a-button>
          <a-button v-if="language.jaName==1" type="primary" class="editable-add-btn yybtn" @click="jaClick">日文</a-button>
          <a-button v-if="language.ruName==1" type="primary" class="editable-add-btn yybtn" @click="ruClick">俄文</a-button>






        </div>
      </div>
      <div class="jcsz">
        <div class="jcsz_inp">
          <ul>
            <li>
              <span class="inp_tit">
                <span class="bt">*</span>标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题：
              </span>
              <a-textarea :rows="2"
              style="width:500px; vertical-align: top;"
                :style="description==''?'border-color:red':''"
                 placeholder="请输入网站标题"
                v-model="title"
              />
              <span class="bz">注：一般不超过80个字符 选择3-6个主关键词</span>

              <span class="bz">例：直线轴承|深沟球轴承|调心轴承-西安佰联轴承网络公司</span>
              <p class="ts" v-if="title==''">
                <a-icon type="close-circle" />标题不能为空
              </p>
            </li>
            <li>
              <span class="inp_tit">
                <span class="bt">*</span>关键词：
              </span>
              <a-textarea :rows="2"
              style="width:500px; vertical-align: top;"
                :style="description==''?'border-color:red':''"
               placeholder="请输入网站关键词"
                v-model="keywords"
              />
              <br />
              <span class="bz">注：一般不超过100个字符 选择6-10个核心业务关键词</span>

              <span class="bz">例：直线轴承,深沟球轴承,调心轴承,西安佰联轴承网络公司</span>
              <p class="ts" v-if="keywords==''">
                <a-icon type="close-circle" />关键词不能为空
              </p>
            </li>
            <li>
              <span class="inp_tit">
                <span class="bt">*</span>描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述：
              </span>
              <a-textarea
                style="width:500px; vertical-align: top;"
                :style="description==''?'border-color:red':''"
                placeholder="请填描述内容（最多允许输入200个汉字！）"
                :rows="4"
                v-model="description"
              />
              <p class="ts" v-if="description==''">
                <a-icon type="close-circle" />请填描述内容不能为空
              </p>
            </li>

            <li class="foot_btn">
              <a-button type="primary" @click="editTKD">提交</a-button>
              <a-button @click="close">取消</a-button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";

export default {
  data() {
    return {
      id_num: "",
      lagType :0,
      //标题
      title: "",
      //关键字
      keywords: "",
      //描述
      description: "",
      dataName: "",
      language:""
    };
  },
  components: {
    headerComm
  },
  methods: {
    close() {
      this.getTKD();
    },
    getTKD() {
      this.axios
        .post(
          "seo/getTKD.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.dataName = res.data.result;
            this.title = res.data.result.title_cn;
            this.keywords = res.data.result.keywords_cn;
            this.description = res.data.result.description_cn;
            this.id_num = res.data.result.id_num;
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    //提交表单添加修改关键词
    editTKD() {
      console.log(this.lagType)
      this.axios
        .post(
          "seo/editTKD.php",
          qs.stringify({
            //授权单位IDd
            sqdwid: this.$store.state.bbl_sqdwid,
            id_num: this.id_num,
            lagType :this.lagType,
            //分类
            title: this.title,
            //地址
            keywords: this.keywords,
            //简介
            description: this.description
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    cnClick() {
      this.lagType =0
      this.title = this.dataName.title_cn;
      this.keywords = this.dataName.keywords_cn;
      this.description = this.dataName.description_cn;
    },
    enClick() {
      this.lagType =1
      this.title = this.dataName.title_en;
      this.keywords = this.dataName.keywords_en;
      this.description = this.dataName.description_en;
    },
    dwClick() {
      this.lagType =2
      this.title = this.dataName.title_dw;
      this.keywords = this.dataName.keywords_dw;
      this.description = this.dataName.description_dw;
    },
    jaClick() {
      this.lagType =3
      this.title = this.dataName.title_ja;
      this.keywords = this.dataName.keywords_ja;
      this.description = this.dataName.description_ja;
    },
     ruClick() {
      this.lagType =4
      this.title = this.dataName.title_ru;
      this.keywords = this.dataName.keywords_ru;
      this.description = this.dataName.description_ru;
    },
  },
  created() {
    this.getTKD();
    this.language=JSON.parse(sessionStorage.getItem("language"))
  }
};
</script>

<style lang='less'>
.jcsz_box{
.hedlist {
  position: relative;
  top: 65px;
  width: 98%;
  left: 1%;
  height: 60px;
  background-color: #fff;
  text-align: left;
  padding: 0 20px;
  .yybtn {
    margin: 0 10px;
  }
}

.tjgl_jcsz {
  width: 62% !important;
  padding: 30px !important;
  top: 40px !important;

  li {
    margin: 11px 0 !important;
  }

  .foot_btn {
    width: 87% !important;
  }
}
.bz {
  color: #ccc;
  font-size: 12px;
  width: 90%;
  float: left;
  margin-left: 10%;
  padding: 6px;
}
.jcsz {
  width: 98%;
  height: auto;
  box-shadow: 0px 0px 7px #ccc;
  background-color: #fff;
  margin: 9px auto;
  position: relative;
  top: 63px;
  text-align: left;
  padding: 30px 77px;

  .head {
    display: flex;
    justify-content: space-between;

    i {
      font-size: 20px;
    }
  }

  .jcsz_inp {
    ul {
      li {
        margin: 20px 0;

        input {
          vertical-align: middle;
        }

        .inp_tit {
          display: inline-block;
          width: 100px;
          text-align: right;

          .bt {
            display: inline-block;
            color: red;
            margin: 0 5px;
          }
        }

        .ts {
          margin: 7px 0 -7px 96px;
          color: red;
          font-size: 12px;
          i {
            margin: 0 5px;
          }
        }
      }

      .foot_btn {
        width: 40%;
        text-align: center;

        button {
          margin: 0 20px;
          width: 150px;
        }
      }
    }
  }
}
}

</style>
